// 菜单切换功能
const menuItems = document.querySelectorAll('.menu-item');
const submenuItems = document.querySelectorAll('.submenu-item');
const currentMenuTitle = document.querySelector('#current-menu .title');

// 轮播图功能
let currentSlide = 0;
const slides = document.querySelectorAll('.carousel-slide');
const indicators = document.querySelectorAll('.indicator');

function showSlide(index) {
    // 隐藏所有幻灯片
    slides.forEach(slide => slide.classList.remove('active'));
    // 显示指定幻灯片
    slides[index].classList.add('active');

    // 更新指示器
    indicators.forEach(indicator => indicator.classList.remove('active'));
    indicators[index].classList.add('active');

    currentSlide = index;
}

function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    showSlide(currentSlide);
}

// 自动播放
let slideInterval = setInterval(nextSlide, 3000);

// 指示器点击事件
indicators.forEach((indicator, index) => {
    indicator.addEventListener('click', () => {
        clearInterval(slideInterval);
        showSlide(index);
        slideInterval = setInterval(nextSlide, 3000);
    });
});

// 初始化显示第一张幻灯片
showSlide(currentSlide);

// submenu 显示控制
let activeSubmenu = null;

// 树形菜单功能
const treeItems = document.querySelectorAll('.tree-item');
const treeTexts = document.querySelectorAll('.tree-text');



// 初始化
function init() {
    // 菜单点击事件
    menuItems.forEach(item => {
        item.addEventListener('click', function (e) {
            // 移除所有菜单项的激活状态
            menuItems.forEach(i => i.classList.remove('active'));

            // 添加当前点击项的激活状态
            this.classList.add('active');

            // 显示 submenu（如果存在）
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                // 隐藏之前激活的 submenu
                if (activeSubmenu && activeSubmenu !== submenu) {
                    activeSubmenu.style.display = 'none';
                }

                // 显示当前 submenu
                submenu.style.display = 'flex';
                activeSubmenu = submenu;
            } else {
                // 如果点击的菜单项没有 submenu，隐藏所有 submenu
                document.querySelectorAll('.submenu').forEach(sub => {
                    sub.style.display = 'none';
                });
                activeSubmenu = null;
            }




        });

        // 鼠标移入事件
        item.addEventListener('mouseenter', function () {
            // 隐藏所有已激活的 submenu
            if (activeSubmenu) {
                activeSubmenu.style.display = 'none';
                activeSubmenu = null;
            }

            // 显示当前菜单项的 submenu（如果存在）
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'flex';
                activeSubmenu = submenu;
            }
        });

        // 鼠标移出事件
        item.addEventListener('mouseleave', function (e) {
            // 检查鼠标是否移向 submenu
            const submenu = this.querySelector('.submenu');
            if (submenu && activeSubmenu === submenu) {
                // 使用 setTimeout 来处理鼠标移出到 submenu 的情况
                setTimeout(() => {
                    if (!submenu.matches(':hover')) {
                        submenu.style.display = 'none';
                        if (activeSubmenu === submenu) {
                            activeSubmenu = null;
                        }
                    }
                }, 100);
            }
        });
    });

    // 二级菜单点击事件
    submenuItems.forEach(item => {
        item.addEventListener('click', function (e) {
            e.stopPropagation(); // 阻止事件冒泡

            // 移除所有菜单项的激活状态
            menuItems.forEach(i => i.classList.remove('active'));

            // 添加父级菜单项的激活状态
            this.closest('.menu-item').classList.add('active');

            // 更新当前菜单显示
            const submenuText = this.textContent;
            if (submenuText) {
                currentMenuTitle.textContent = submenuText;
            }
            const submenuType = this.dataset.submenu;
            
            // 页面跳转逻辑
            let targetUrl = '';
            if (submenuType === 'overview1') {
                targetUrl = '../library-office/index.html?type=exhibition';
            } else if (submenuType === 'overview2') {
                targetUrl = '../library-office/index.html?type=inquiry';
            } else if (submenuType === 'collection1' || submenuType === 'collection2' || submenuType === 'collection3') {
                targetUrl = '../archival-collections/index.html?type=' + submenuType;
            } else if (submenuType === 'service1' || submenuType === 'service2' || submenuType === 'service3') {
                targetUrl = '../public-service/index.html?type=' + submenuType;
            } else if (submenuType === 'culture1' || submenuType === 'culture2') {
                targetUrl = '../chronicle-culture/index.html?type=' + submenuType;
            } else if (submenuType === 'status1' || submenuType === 'statu2') {
                targetUrl = '../work-status/index.html?type=' + (submenuType === 'status1' ? 'exhibition' : 'inquiry');
            }
            
            // 如果有目标URL，则跳转到对应页面
            if (targetUrl) {
                window.location.href = targetUrl;
                return;
            }
            
            // 获取内容区域元素
            const unitOverview = document.querySelector('.unit-overview');
            const standardsRegulations = document.querySelector('.standards-regulations');

            // 隐藏所有内容区域
            unitOverview.style.display = 'none';
            standardsRegulations.style.display = 'none';
            let targetTreeType = '';
            if (submenuType === 'overview1') {
                targetTreeType = 'exhibition';
            } else if (submenuType === 'overview2') {
                targetTreeType = 'inquiry';
            }
            // 根据树项类型显示对应内容
            if (targetTreeType === 'exhibition') {
                // 单位概况内容
                unitOverview.innerHTML = `
                    <div style="padding: 20px;">
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">朝阳区档案馆简介</h3>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">朝阳区档案馆成立于1986年，是集中保存、管理全区档案资料的文化事业机构，负责接收、整理、保管和提供利用朝阳区党政机关、群众团体、企事业单位的重要档案。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">档案馆建筑面积5000余平方米，设有档案库房、查阅大厅、陈列展览厅等功能区域，配备了现代化的档案保管和保护设施，确保档案的安全与完整。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">馆藏档案涵盖了从新中国成立初期至今的各类重要文件、照片、音像资料等，内容丰富，种类齐全，为研究朝阳区的历史发展和社会变迁提供了宝贵的第一手资料。</p>
                        
                        <h3 style="margin: 25px 0 15px; color: #333; font-size: 20px;">朝阳区地方志办公室简介</h3>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">朝阳区地方志办公室是负责全区地方志编纂、研究和开发利用的工作机构，承担着《朝阳区志》、《朝阳年鉴》等志书、年鉴的编纂出版任务。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">区志办致力于挖掘整理朝阳区的历史文化资源，通过编纂地方志书、举办地情展览、开展地情研究等方式，传承和弘扬朝阳地域文化，为朝阳区的经济社会发展提供历史借鉴和智力支持。</p>
                    </div>
                `;
                unitOverview.style.display = 'block';
            } else if (targetTreeType === 'inquiry') {
                // 法规标准内容
                standardsRegulations.innerHTML = `
                    <div style="padding: 20px;">
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">档案法规</h3>
                        <ul style="margin-bottom: 25px; list-style-type: none;">
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《中华人民共和国档案法》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2020-06-20</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《中华人民共和国档案法实施条例》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2024-01-01</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《北京市实施〈中华人民共和国档案法〉办法》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2016-11-25</span>
                            </li>
                        </ul>
                        
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">地方志法规</h3>
                        <ul style="margin-bottom: 25px; list-style-type: none;">
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《地方志工作条例》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2006-05-18</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《北京市地方志工作规定》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2018-03-01</span>
                            </li>
                        </ul>
                        
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">规范性文件</h3>
                        <ul style="list-style-type: none;">
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《朝阳区档案管理办法》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2022-08-15</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《朝阳区地方志编纂工作规范》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2021-11-10</span>
                            </li>
                        </ul>
                    </div>
                `;
                standardsRegulations.style.display = 'block';
            }
            const targetTreeItem = document.querySelector(`.tree-item[data-tree="${targetTreeType}"]`);
            if (targetTreeType && targetTreeItem) {
                // 移除所有树项的选中状态
                treeItems.forEach(i => i.classList.remove('selected'));
                // 添加目标树项的选中状态
                targetTreeItem.classList.add('selected');
            }
        });
    });

    // 树形菜单点击事件
    treeTexts.forEach(item => {
        item.addEventListener('click', function () {
            // 移除所有树项的选中状态
            treeItems.forEach(i => i.classList.remove('selected'));
            // 添加当前点击项的选中状态
            this.parentElement.classList.add('selected');

            // 更新当前菜单显示
            const treeText = this.textContent;
            if (treeText) {
                currentMenuTitle.textContent = treeText;
            }

            // 获取当前树项的数据属性
            const treeItem = this.parentElement;
            const treeType = treeItem.getAttribute('data-tree');

            // 获取内容区域元素
            const unitOverview = document.querySelector('.unit-overview');
            const standardsRegulations = document.querySelector('.standards-regulations');

            // 隐藏所有内容区域
            unitOverview.style.display = 'none';
            standardsRegulations.style.display = 'none';

            // 根据树项类型显示对应内容
            if (treeType === 'exhibition') {
                // 单位概况内容
                unitOverview.innerHTML = `
                    <div style="padding: 20px;">
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">朝阳区档案馆简介</h3>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">朝阳区档案馆成立于1986年，是集中保存、管理全区档案资料的文化事业机构，负责接收、整理、保管和提供利用朝阳区党政机关、群众团体、企事业单位的重要档案。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">档案馆建筑面积5000余平方米，设有档案库房、查阅大厅、陈列展览厅等功能区域，配备了现代化的档案保管和保护设施，确保档案的安全与完整。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">馆藏档案涵盖了从新中国成立初期至今的各类重要文件、照片、音像资料等，内容丰富，种类齐全，为研究朝阳区的历史发展和社会变迁提供了宝贵的第一手资料。</p>
                        
                        <h3 style="margin: 25px 0 15px; color: #333; font-size: 20px;">朝阳区地方志办公室简介</h3>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">朝阳区地方志办公室是负责全区地方志编纂、研究和开发利用的工作机构，承担着《朝阳区志》、《朝阳年鉴》等志书、年鉴的编纂出版任务。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">区志办致力于挖掘整理朝阳区的历史文化资源，通过编纂地方志书、举办地情展览、开展地情研究等方式，传承和弘扬朝阳地域文化，为朝阳区的经济社会发展提供历史借鉴和智力支持。</p>
                    </div>
                `;
                unitOverview.style.display = 'block';
            } else if (treeType === 'inquiry') {
                // 法规标准内容
                standardsRegulations.innerHTML = `
                    <div style="padding: 20px;">
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">档案法规</h3>
                        <ul style="margin-bottom: 25px; list-style-type: none;">
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《中华人民共和国档案法》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2020-06-20</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《中华人民共和国档案法实施条例》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2024-01-01</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《北京市实施〈中华人民共和国档案法〉办法》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2016-11-25</span>
                            </li>
                        </ul>
                        
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">地方志法规</h3>
                        <ul style="margin-bottom: 25px; list-style-type: none;">
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《地方志工作条例》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2006-05-18</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《北京市地方志工作规定》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2018-03-01</span>
                            </li>
                        </ul>
                        
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">规范性文件</h3>
                        <ul style="list-style-type: none;">
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《朝阳区档案管理办法》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2022-08-15</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《朝阳区地方志编纂工作规范》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2021-11-10</span>
                            </li>
                        </ul>
                    </div>
                `;
                standardsRegulations.style.display = 'block';
            }
        });
    });




}



// 点击页面其他地方隐藏 submenu
function hideSubmenuOnClickOutside(e) {
    if (activeSubmenu && !activeSubmenu.contains(e.target) && !e.target.closest('.has-submenu')) {
        activeSubmenu.style.display = 'none';
        activeSubmenu = null;
    }
}

document.addEventListener('click', hideSubmenuOnClickOutside);

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    // 解析URL参数，根据type参数设置对应的树形菜单选中状态
    const urlParams = new URLSearchParams(window.location.search);
    const contentType = urlParams.get('type');
    
    if (contentType) {
        // 查找对应的树形菜单项
        const targetTreeItem = document.querySelector(`.tree-item[data-tree="${contentType}"]`);
        if (targetTreeItem) {
            // 移除所有树项的选中状态
            treeItems.forEach(item => item.classList.remove('selected'));
            // 添加目标树项的选中状态
            targetTreeItem.classList.add('selected');
            
            // 更新当前菜单标题
            const menuTitle = targetTreeItem.querySelector('.tree-text').textContent.trim();
            if (menuTitle && currentMenuTitle) {
                currentMenuTitle.textContent = menuTitle;
            }
            
            // 获取内容区域元素
            const unitOverview = document.querySelector('.unit-overview');
            const standardsRegulations = document.querySelector('.standards-regulations');
            
            // 隐藏所有内容区域
            unitOverview.style.display = 'none';
            standardsRegulations.style.display = 'none';
            
            // 根据树项类型显示对应内容
            if (contentType === 'exhibition') {
                // 单位概况内容
                unitOverview.innerHTML = `
                    <div style="padding: 20px;">
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">朝阳区档案馆简介</h3>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">朝阳区档案馆成立于1986年，是集中保存、管理全区档案资料的文化事业机构，负责接收、整理、保管和提供利用朝阳区党政机关、群众团体、企事业单位的重要档案。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">档案馆建筑面积5000余平方米，设有档案库房、查阅大厅、陈列展览厅等功能区域，配备了现代化的档案保管和保护设施，确保档案的安全与完整。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">馆藏档案涵盖了从新中国成立初期至今的各类重要文件、照片、音像资料等，内容丰富，种类齐全，为研究朝阳区的历史发展和社会变迁提供了宝贵的第一手资料。</p>
                        
                        <h3 style="margin: 25px 0 15px; color: #333; font-size: 20px;">朝阳区地方志办公室简介</h3>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">朝阳区地方志办公室是负责全区地方志编纂、研究和开发利用的工作机构，承担着《朝阳区志》、《朝阳年鉴》等志书、年鉴的编纂出版任务。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">区志办致力于挖掘整理朝阳区的历史文化资源，通过编纂地方志书、举办地情展览、开展地情研究等方式，传承和弘扬朝阳地域文化，为朝阳区的经济社会发展提供历史借鉴和智力支持。</p>
                    </div>
                `;
                unitOverview.style.display = 'block';
            } else if (contentType === 'inquiry') {
                // 法规标准内容
                standardsRegulations.innerHTML = `
                    <div style="padding: 20px;">
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">档案法规</h3>
                        <ul style="margin-bottom: 25px; list-style-type: none;">
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《中华人民共和国档案法》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2020-06-20</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《中华人民共和国档案法实施条例》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2024-01-01</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《北京市实施〈中华人民共和国档案法〉办法》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2016-11-25</span>
                            </li>
                        </ul>
                        
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">地方志法规</h3>
                        <ul style="margin-bottom: 25px; list-style-type: none;">
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《地方志工作条例》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2006-05-18</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《北京市地方志工作规定》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2018-03-01</span>
                            </li>
                        </ul>
                        
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">规范性文件</h3>
                        <ul style="list-style-type: none;">
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《朝阳区档案管理办法》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2022-08-15</span>
                            </li>
                            <li style="margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid #eee;">
                                <a href="#" style="color: #5B503A; text-decoration: none;">《朝阳区地方志编纂工作规范》</a>
                                <span style="float: right; color: #7f7f7f; font-size: 14px;">2021-11-10</span>
                            </li>
                        </ul>
                    </div>
                `;
                standardsRegulations.style.display = 'block';
            }
        }
    }
    
    // 初始化页面
    init();
});